﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>卷动与滑动2</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #btn{
            width: 150px;
            height:50px;
            text-align: center;
            line-height: 50px;
            background: #3399ff;
            border: 1px solid #ff4400;
            cursor: pointer;
            margin:auto;
            display: block;
        }
        #menu{
            width: 148px;
            margin:auto;
            border: 1px solid #ccc;
            border-top: none;
            overflow: hidden;
            display: none;
        }
        #menu ul {
            list-style-type: none;
        }
        #menu ul li{
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
<input type="button" id="btn" value="向下滑动">
<div id="menu">
    <ul>
        <li>乖乖乖乖</li>
        <li>乖乖乖乖</li>
        <li>乖乖乖乖</li>
        <li>乖乖乖乖</li>
        <li>乖乖乖乖</li>
    </ul>
</div>
</body>
</html>
<script src="js/jquery-1.10.1.js"></script>
<script>
    $(function () {
        //添加点击事件
        $("#btn").click(function () {
            //切换卷动与滑动效果slideToggle
            $("#menu").stop().slideToggle('slow');
        });
    });
</script>